<template>
	<u-tabbar
		:value="tabbarIndex"
		@change="changTabbarIndex"
		:placeholder="true"
		activeColor="#d81e06"
		:safeAreaInsetBottom="false"
	>
		<u-tabbar-item name="index">
			<image
				class="u-page__item__slot-icon"
				slot="active-icon"
				src="https://cdn.uviewui.com/uview/common/bell-selected.png"
				mode="widthFix"
			></image>
			<image
				class="u-page__item__slot-icon"
				slot="inactive-icon"
				src="https://cdn.uviewui.com/uview/common/bell.png"
				mode="widthFix"
			></image>
		</u-tabbar-item>
		<u-tabbar-item text="放映厅" icon="photo" name="index2"></u-tabbar-item>
		<u-tabbar-item text="直播" icon="play-right" ></u-tabbar-item>
		<u-tabbar-item text="我的" icon="account" ></u-tabbar-item>
	</u-tabbar>
</template>

<script>
	export default{
		data(){
			return{
				tabbarIndex: 0
			}
		},
		methods:{
			changTabbarIndex(index){
				let that = this;
				that.tabbarIndex = index;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.u-page__item__slot-icon{
		width: 30px;
		height: 30px;
		animation: bounce 2s;
	}
	@keyframes bounce {
	    0%,20%,53%,80%,to {
	        -webkit-animation-timing-function: cubic-bezier(.215,.61,.355,1);
	        animation-timing-function: cubic-bezier(.215,.61,.355,1);
	        -webkit-transform: translateZ(0);
	        transform: translateZ(0)
	    }
	
	    40%,43% {
	        -webkit-transform: translate3d(0,-10rpx,0);
	        transform: translate3d(0,-10rpx,0)
	    }
	
	    40%,43%,70% {
	        -webkit-animation-timing-function: cubic-bezier(.755,.05,.855,.06);
	        animation-timing-function: cubic-bezier(.755,.05,.855,.06)
	    }
	
	    70% {
	        -webkit-transform: translate3d(0,-5rpx,0);
	        transform: translate3d(0,-5rpx,0)
	    }
	
	    90% {
	        -webkit-transform: translate3d(0,-2rpx,0);
	        transform: translate3d(0,-2rpx,0)
	    }
	}
</style>
